React Component -- 组件基础知识
React Component -- 组件基础知识
目标：
- 什么是组件化？
- 为什么需要组件化？
- React 的组件化
- 组件化开发的优点
- 如何设计一个组件
1. 什么是组件化？
组件化是一种开发思想，是一种开发思路上的解决方案，理解了这种思想可以更好的去编写代码的逻辑和复用组件。
我们在面对复杂问题的时候，经常会使用一种思考方式
- 将问题一步步的划分细化，分解成许多可处理的小问题
- 然后一个个的解决
- 然后放回整体中，问题就解决了
其实上面的这种思想就是分而治之：
- 分而治之是一种重要思想，是复杂系统开发和维护的基石
- 前端目前的组件化开发都是基于分而治之的思想
组件化也是与分而治之类似的思想：
- 如果我们将页面逻辑全部放在同一个页面中，处理起来将会非常复杂，不利于后期的管理拓展和维护。
- 如果我们将页面逻辑拆分成一个个小的功能块，每个功能块完成自己这部分独立的功能，然后整合成一个页面，那么之后整个页面的管理和维护就变得非常容易了。
组件化的思想来思考整个应用程序：
- 将应用程序分成不同的页面
- 将页面中不同的功能分为不同的组件
- 在其中组件还可以继续细分，部分组件可以复用
为什么需要组件化？
使用场景：
- 如果将逻辑和布局组件东放入一个组件中会使得代码量增加并且不易修改
- 代码之间的冲突
- 部分组件需要复用
解决的问题：
- 项目复杂后，文件内容过多
- 重复度过高
- 质量差，可控性低
React 的组件化
组件化的核心思想就是，将页面封装成一个组件：
- 组件化提供了一种抽象方式，让我们可以使用一个个独立的小组件来组合构建文明的应用
- 任何的应用都会被抽象成一颗组件树
应用：
- 软件开发的必要思维
- 组件的复用，减少了冗余代码
- 合作开发减少了冲突
- 将布局拆分后可以更好的管理代码和维护
React 的组件按照不同的方式可以分成很多类组件：
- 根据组件的定义方式：函数组件和类组件；
- 根据组件内部是否有状态需要维护：无状态组件和有状态组件；
- 根据组件的不同职责：展示型组件和容器型组件；
这些概念有很多重叠，但是他们最主要是关注 数据逻辑和 UI 展示的分离：
- 函数组件、无状态组件、展示型组件主要关注 UI 的展示；
- 类组件、有状态组件、容器型组件主要关注数据逻辑；
组件化开发的优点
组件化开发的两个重要优点，让前端工程化以及降低代码的维护难度。
降低了系统各个功能之间的耦合性
提高功能内部的聚合性
最小化了重绘（
diff算法）结果可预测
避免了不必要的
dom操作
耦合性的降低，提高了系统的伸展性，降低了开发复杂度，提升开发效率，降低开发成本。
如何设计一个组件
专一性：
设计组件要遵循一个原则：一个组件只专注做一件事，且把这件事做好。
一个功能如果可以拆分成多个功能点，那就可以将每个功能点封装成一个组件。
值得注意的是，并不是组件拆分的越小越好，如果组件拆分的很小且复用性不高，那也是不可取的。只需要将一个组件内的功能和逻辑控制在一个可控的范围内就可以了。
可配置性：
设计组件，要明确它的可配置性，也就是明确它的输入和输出分别是什么。
组件除了要展示默认的内容，还需要做一些动态的适配。比如，组件中有文字内容，需要动态修改，根据外部传值。
要做可配置性，最基本的方式是通过属性向组件传递配置的值，而在组件初始化的声明周期内，通过读取属性的值做出对应的显示修改。还有一些方法，通过调用组件暴露出来的函数，向函数传递有效的值；修改全局 CSS 样式；向组件传递特定事件，并在组件内监听该事件来执行函数等。
可复用性：
封装一个组件的一个关键点，就是它的复用性。
如果只是在单页面中使用的话，并没有一定要将其封装出去，如果所有的组件都细分且封装出去，会让程序的可读性降低。
组件的描述分为两个部分：组件说明和组件实现。 任何可重用组件都必须要有特征说明( 重用组件的类型信息) 和规则说明( 组件的动态行为)，分别描述重用组件的静态特征和动态语义。另外，在描述重用组件的信息中还应包括组件接口信息，例如组件是客户组件还是服务者组件。一个组件可以有多个“ 提供”接口和“ 要求”接口。